<template>
  <div class="enterprises">
    <div class="body">
      <div class="title">
        通讯录字段管理
      </div>
      <div class="from" v-loading="loading" element-loading-text="正在查询中。。。">
        <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="reservefield_name" ref="saveTagInput" size="mini"
         @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
        <el-button class="input-new-tag" size="mini" @click="showInput">+ 新字段</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { get_ReserveList, add_Reserve,del_Reserve } from "@/api/mailList";

export default {
  name: "MailList",
  data() {
    return {
      loading:false,
      dynamicTags: [],
      inputVisible: false,
      reservefield_name: "",
      dataList:[],
      tag:""
    };
  },
  methods: {
    handleClose(tag) {
      this.tag=tag
      this.batchDel()
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let reservefield_name = this.reservefield_name;
      if (reservefield_name) {
        this.dynamicTags.push(reservefield_name);
        this.addMail()
      }
      this.inputVisible = false;
      this.reservefield_name = "";
    },
    //获取通讯录字段数据
    async initList() {
      const query = {company_id: localStorage.getItem("companyId") - 0};
      this.loading=true;
      const { data } = await get_ReserveList(query);
      this.loading=false;
      if (data.status == 100) {
        this.dataList = data.data.rows
        for (let i = 0; i < data.data.rows.length; i++) {
          let element = data.data.rows[i];
          this.dynamicTags.push(element.reservefield_name)
        }
      }
    },
    //添加通讯录字段数据
    async addMail() {
      const query = {reservefield_name:this.reservefield_name, company_id: localStorage.getItem("companyId") - 0};
      this.loading=true;
      const { data } = await add_Reserve(query);
      this.loading=false;
      if (data.status == 100) {
        this.$message.success('添加成功')
      }
    },
    //批量删除
    async batchDel() {
      try {
        let res = await this.$confirm('确认删除吗？');
        if(res == 'confirm'){
          this.loading = true ;
          let ids = '';
          this.dataList.map(item => {
            if (this.tag==item.reservefield_name) {
              ids=item.id
            }
          });
          let { data } = await del_Reserve({id: ids });
          this.loading = false ;
          if(data.status == 100){
            this.$message.success('删除成功')
            this.dynamicTags=[]   //清空数据
            this.initList()
          }
        }
      } catch (error) {

      }
    },
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.enterprises {
  margin: 20px;
  .body {
    background: #fff;
    padding: 1.5rem;
    .title {
      background: #f4f6f8;
      font-size: 16px;
      color: #3a3a3a;
      font-weight: 600;
      padding: 1rem 2rem;
    }
    .from {
      margin-top: 2rem;
    }
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 8px;
  vertical-align: bottom;
}
</style>
